<template>
  <van-popup v-model="isShowFilterPop" round position="top" @close="close">
    <div>
      <div class="head_label dis_flex">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">所有课程列表</div>
      </div>
      <div class="pop_cont">
        <div class="dis_flex">
          <searchInput
            type="text"
            :inputValue="filterData.courseName"
            placeholder="搜索课程名称"
          >
          </searchInput>
          <img
            src="@/assets/images/evaluate/filtrate_icon.png"
            alt=""
            class="search_img"
          />
        </div>
        <div>
          <div class="problem_tit">是否收藏</div>
          <div class="dis_flex">
            <div
              class="answer_btn"
              :class="{ active: filterData.is_collect == item.value }"
              v-for="(item, index) in collectList"
              :key="index"
              @click="checkCollect(item.value)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
        <div>
          <div class="problem_tit">是否学习</div>
          <div class="dis_flex">
            <div
              class="answer_btn"
              :class="{ active: filterData.is_learning == item.value }"
              v-for="(item, index) in learnList"
              :key="index"
              @click="checkLearn(item.value)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="dis_flex just_cont_spa_bet">
          <div class="clear_btn footer_btn" @click="toClear">清空</div>
          <div class="confirm_btn footer_btn" @click="toConfirm">确定</div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import searchInput from "@/components/searchInput/index.vue";
export default {
  props: {
    isShowFilterPop: Boolean,
  },
  data() {
    return {
      value: "",
      filterData: {
        is_collect: null,
        is_learning: null,
        courseName: 1,
      },
      collectList: [
        {
          value: 1,
          label: "已收藏",
        },
        {
          value: 0,
          label: "未收藏",
        },
      ],
      learnList: [
        {
          value: 1,
          label: "已学习",
        },
        {
          value: 0,
          label: "未学习",
        },
      ],
    };
  },
  components: {
    searchInput,
  },
  methods: {
    toConfirm() {
      let par = {
        name: this.filterData.courseName,
        is_learning: this.filterData.is_learning,
        is_collect: this.filterData.is_collect,
      };
      this.$emit("getFilterData", par);
    },
    toClear() {
      this.filterData = {
        is_collect: null,
        is_learning: null,
        courseName: "",
      };
      this.clearInput();
    },
    checkCollect(v) {
      this.filterData.is_collect = v;
    },
    checkLearn(v) {
      this.filterData.is_learning = v;
    },
    clearInput() {
      this.filterData.courseName = "";
    },
    close() {},
  },
};
</script>

<style lang="less" scoped>
::v-deep.van-popup--top.van-popup--round {
  border-radius: 0px 0px 10px 10px;
  background-color: #f4f6fa;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just_cont_spa_bet {
  justify-content: space-between;
}

.pop_cont {
  padding: 20px;
  background: #fff;
}

.head_label {
  margin: 19px 0;
  padding-left: 20px;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.search_input {
  width: 280px;
  height: 33.33px;
  margin: 0;
}

.search_img {
  width: 15px;
  height: 16.67px;
  margin-left: 16px;
}

.problem_tit {
  font-weight: bold;
  font-size: 14px;
  line-height: 14px;
  color: #000000;
  margin: 16.67px 0;
}

.answer_btn {
  width: 102.33px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: #f4f6fa;
  border-radius: 6.67px;
  color: #555555;
  font-weight: bold;
  font-size: 14px;
  margin-right: 7px;

  &:last-child {
    margin-right: 0;
  }
}

.active {
  border: 1px solid #00aeff;
  color: #00aeff;
}

.footer_btn {
  width: 155px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  font-size: 15.33px;
  font-weight: bold;
  border-radius: 6.67px;
  margin-top: 33.33px;
}

.clear_btn {
  border: 0.33px solid #dddddd;
  color: #333333;
}

.confirm_btn {
  color: #fff;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
}
</style>
